<template>
  <div>
    <a-modal
      title="表达式配置"
      :visible="visible"
      @ok="handleOk"
      @cancel="visible = false"
      width="700px"
    >
      <a-space>
        <a-button @click="add">增加条件</a-button>
        <a-button @click="remove">删除条件</a-button>
      </a-space>
      <div
        v-for="(express, index) in expressions"
        :key="index"
        style="margin-top: 15px"
      >
        <a-checkbox v-model="express.isChecked">{{ index + 1 }}</a-checkbox>
        <a-select
          v-model="express.joinCondition"
          v-if="index > 0"
          style="width: 10%"
        >
          <a-select-option value="&&">并且</a-select-option>
          <a-select-option value="||">或</a-select-option>
        </a-select>
        <a-cascader
          :options="properties"
          placeholder="请选择"
          :fieldNames="fieldNames"
          v-model="express.property"
        ></a-cascader>
        <a-select v-model="express.condition" style="width: 15%">
          <a-select-option value=">">大于</a-select-option>
          <a-select-option value=">=">大于等于</a-select-option>
          <a-select-option value="<=">小于等于</a-select-option>
          <a-select-option value="<">小于</a-select-option>
          <a-select-option value="==">等于</a-select-option>
          <a-select-option value="!=">不等于</a-select-option>
        </a-select>
        <a-input v-model="express.value" style="width: 20%"></a-input>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { getPropertiesFromModel } from "@/services/tmodelExplain";

export default {
  data() {
    return {
      visible: false,
      expressions: [],
      properties: [],
      fieldNames: { label: "name", value: "identifier", children: "children" },
      callback:null,
      owner:null,
    };
  },

  methods: {
    Show(owner,callback, model, expressions) {
      this.owner = owner
      this.callback = callback
      if(expressions){
        this.expressions = Object.assign([],expressions);
      }else{
        this.expressions = []
      }
      
      this.visible = true;
      if (model) {
        this.properties = getPropertiesFromModel(model);
        console.log("%%%%%%%%%%%%%%%%", this.properties);
      }
    },
    handleOk() {
      if(this.callback){
        let self = this
        let expression = ""
        let first = true
        this.expressions.forEach(exp=>{
          let sexp = ""
          if(exp.property){
            if(exp.property.length == 2){
              sexp = "{{" + exp.property[0] + "." + exp.property[1] + "}}"
            }else{
              sexp = "{{" + exp.property[0] + "}}"
            }
          }
          sexp =  sexp + " " +  exp.condition + " " + exp.value 
          sexp = "(" + sexp + ")"
          if(!first){
            sexp = " " + exp.joinConditon + " " + sexp 
          }
          first = false
          expression += sexp
        })
        this.callback(this.owner,expression).then(()=>{
          self.visible = false
        })
      }
    },
    add() {
      this.expressions.push({
        isChecked: false,
        condition: ">=",
        value: "",
        joinConditon: "&&",
      });
    },
    remove() {
      this.expressions = this.expressions.filter((ex) => {
        return ex.isChecked == false;
      });
    },
  },
};
</script>